<template>
	<div id="recommend">
		<mt-swipe class='swipe' :show-indicators="false" :auto="4000" :speed="1000">
			<mt-swipe-item v-for='item in slider'><img :src="item.picUrl" /></mt-swipe-item>
		</mt-swipe>
		
		<div class="station">
			<div class="title">电台</div>
			<ul class="clearfix">
				<li class="fl" v-for="item in radioList">
					<div class="img">
						<img :src="item.picUrl"/>
						<span class="player"></span>
					</div>
					<div class="info">
						{{item.Ftitle}}
					</div>
				</li>
			</ul>
		</div>
		
		<div class="hot">
			<div class="title">热门歌单</div>
			<ul class="clearfix">
				<li class="fl" v-for="item in songList" @click="goToList(item.id)">
					<div class="img">
						<img :src="item.picUrl"/>
						<span class="player"></span>
						<span class="accessnum">
							<i class="iconfont icon-headseterji"></i>
							{{accessnum(item.accessnum)}}万
						</span>
					</div>
					<div class="info">
						<div class="desc textOverflow">
							{{item.songListDesc}}
						</div>
						<div class="author">
							{{item.songListAuthor}}
						</div>
					</div>
				</li>
			</ul>
			<p class="more-list">去客户端发现更多好音乐 ></p>
		</div>
		
		<footer>
			<div class="footer">
				<div class="pc-web">查看电脑版网页</div>
				<div class="footer-logo"></div>
				<p class="copyright">Copyright © 2017 - <span>2018</span> Lsuyan. All Rights Reserved.</p>
				<p class="contact">联系方式：<span>emmm~~~ 电话欠费中...</span></p>
			</div>
		</footer>
	</div>
</template>

<script>
	import api from "../js/musicAPI.js";

	export default {
		data: function() {
			return {
				songList: "",
				slider: "",
				radioList:"",
			}
		},
		created: function() {
			//请求首页接接口
			api.getRecommend().then((res) => {
				//console.log(res.data);
				this.songList = res.data.songList;
				this.slider = res.data.slider;
				this.radioList=res.data.radioList;
			});
		},
		methods: {
			//地址传参
			goToList: function(id) {
				this.$router.push({
					path: "/list",
					query: {
						mid: id,
						type:"songlist"
					}
				});
			},
			//播放量保留一位小数，以万为单位
			accessnum:function(num){
				var n=num/10000;
				return n.toFixed(1);
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../scss/recommend";
</style>